<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img src="../assets/images/swiper1.jpeg" alt="" width="100%" height="165px">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/images/swiper2.jpeg" alt="" width="100%" height="165px">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/images/swiper2.jpeg" alt="" width="100%" height="165px">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right" slot="pagination"></div>
    </swiper>
    <div class="bg-white mt-3 home-nav">
      <div class="nav display-flex wrap ">
        <div class="nav-item mt-3 mb-3 text-center" v-for="n in 10" :key="n">
          <i class="sprite blz pl-5"></i>
          <div>爆料站</div>
        </div>
      </div>
      <div class="display-flex jc-center ai-center bg-white-1 p-2">
        <i class="sprite arrowTop mr-2"></i>
        <p>收起</p>
      </div>
    </div>
    <Card title="新闻资讯" icon="menu1" iconBack="shengluo" :categories="newCates" class="border-b">
      <template #items="{category}">

          <router-link tag="div" class="pt-3 font-m display-flex ai-center" v-for="(news,i) in category.newsList" :key="i" :to="`/articles/${news._id}`">
            <span>[{{news.categoryName}}]</span>
            <span class="pl-1 pr-1">|</span>
            <span class="flex-1 font-l text-ellipsis">{{news.title}}</span>
            <span>{{news.createdAt | dataFormat}}</span>
          </router-link>
      </template>

    </Card>
    <Card title="英雄列表" icon="yingxiong" iconBack="shengluo" :categories="heroCates">
      <template #items="{category}">
        <div class="display-flex wrap ai-center text-center">
          <router-link :to="`/heroes/${hero._id}`" tag="div" class="hero-item pt-2 font-m" v-for="(hero,i) in category.heroList" :key="i">
            <img :src="hero.avatar" alt="" class="p-2">
            <div class="font-s">{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </Card>

  </div>
</template>

<script>
  import Card from "./Card/Card";
  import moment from "moment"
  export default {
    name: "Body.vue",
    filters:{
      dataFormat(value){
         return moment(value).format('MM-DD')
      }
    },
    data(){
      return{
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // autoplay:{
          //   // delay:1500
          // }
        } ,
        newCates:[],
        heroCates:[]
      }
    },
    methods:{
      async fetch(){
        const res = await this.$http.get(`news/list`)
        this.newCates = res.data
      },
      async heroFetch(){
        const res = await this.$http.get(`heroes/list`)
        this.heroCates = res.data
      }
    },
    created() {
      this.heroFetch()
      this.fetch()
    },
    components:{
      Card
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/style/variables";
  .pagination-home{
    .swiper-pagination-bullets{
      text-align: map_get($text-aligns,'right');
      .swiper-pagination-bullet{
        opacity: 1;
        border-radius:0.154rem;
        background:map_get($colors,'white');
        &.swiper-pagination-bullet-active{
          background:map-get($colors,'info')
        }
      }
    }


  }
  .home-nav{
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
  }
  .nav-item{
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n){
      border: none;
    }
  }

  .hero-item{
    width: 20%;
    img{
      width: 100%;
      height: auto;
    }
  }
</style>